<template>
	<view class="container">
		<!-- 用户信息区域 -->
		<view class="user-info-section">
			<!-- 自定义导航栏 -->
			<view class="custom-navbar">
				<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
				<view class="navbar-content">
					<view class="navbar-title">个人中心</view>
					<!-- 通知图标 -->
					<view class="notification-icon" v-if="isLoggedIn" @click="navigateToNotifications">
						<text class="notify-icon-text">✉️</text>
						<view class="unread-badge" v-if="unreadCount > 0">{{unreadCount > 99 ? '99+' : unreadCount}}</view>
					</view>
				</view>
			</view>
			
			<view class="user-info" @click="handleUserInfoClick">
				<view class="user-avatar-container">
					<image class="avatar" :src="userInfo.avatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
					<!-- 认证信息标识 -->
					<view class="certification-badge" v-if="userInfo.credential_status === 'approved'">
						<image class="certification-icon" src="/static/images/verified.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="user-detail">
					<text class="username">{{userInfo.nickname || userInfo.username || '未登录'}}</text>
					<text class="user-role" :class="userRoleClass">{{getUserRoleText()}}</text>
				</view>
				<view class="login-tip" v-if="!isLoggedIn">
					<text>点击登录</text>
					<text class="arrow">></text>
				</view>
			</view>
		</view>
		
		<!-- 功能菜单区域 -->
		<view class="menu-section">
			<!-- 我的学习 -->
			<view class="menu-group">
				<view class="section-card">
					<view class="menu-title">我的学习</view>
					<view class="icon-grid">
						<view class="icon-item" @click="navigateTo('/packageMy/my/learning-records')">
							<view class="book-icon-main"></view>
							<text class="icon-label">学习记录</text>
						</view>
						<view class="icon-item" @click="navigateTo('/packageMy/my/favorites')">
							<view class="star-icon-main"></view>
							<text class="icon-label">我的收藏</text>
						</view>
						<view class="icon-item" @click="navigateTo('/packageMy/my/learning-plan')">
							<view class="calendar-icon-main"></view>
							<text class="icon-label">学习计划</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 认证申请 - 所有登录用户都可以看到 -->
			<view class="menu-group" v-if="isLoggedIn">
				<view class="section-card">
					<view class="menu-title">认证申请</view>
					<view class="icon-grid">
						<view class="icon-item" @click="navigateTo('/packageMy/my/credential-upload')">
							<view class="certificate-icon-main"></view>
							<text class="icon-label">身份资格认证</text>
							<view class="icon-badge" v-if="userInfo.credential_status" :class="'badge-' + userInfo.credential_status">
								{{getCredentialStatusText(userInfo.credential_status)}}
							</view>
							<view class="icon-badge badge-unverified" v-else>未认证</view>
						</view>
						<view class="icon-item" @click="navigateTo('/packageMy/my/certificates')" v-if="userInfo.credential_status">
							<view class="award-icon-main"></view>
							<text class="icon-label">我的证书</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 比赛管理 -->
			<view class="menu-group" v-if="isLoggedIn">
				<view class="section-card">
					<view class="menu-title">赛事管理</view>
					<view class="icon-grid">
						<view class="icon-item" @click="navigateTo('/packageMy/my/application-list')">
							<view class="form-icon-main"></view>
							<text class="icon-label">我的报名</text>
						</view>
						<view class="icon-item" @click="navigateTo('/packageMy/my/match-records')">
							<view class="chart-icon-main"></view>
							<text class="icon-label">执裁记录</text>
						</view>
						<view class="icon-item" @click="navigateTo('/packageMy/my/pending-records')">
							<view class="clock-icon-main"></view>
							<text class="icon-label">执裁评价</text>
							<view class="icon-badge badge-pending" v-if="pendingRecordsCount > 0">{{pendingRecordsCount}}</view>
						</view>
						<view class="icon-item" @click="navigateTo('/packageMy/my/publish-match')" v-if="canPublishMatch">
							<view class="megaphone-icon-main"></view>
							<text class="icon-label">比赛发布</text>
						</view>
						<view class="icon-item" @click="navigateTo('/packageMy/my/match-review')" v-if="canReviewMatch">
							<view class="shield-icon-main"></view>
							<text class="icon-label">选派审核</text>
						</view>
						<view class="icon-item" @click="navigateTo('/packageMy/my/series-records')" v-if="canReviewMatch">
							<view class="tournament-icon-main"></view>
							<text class="icon-label">系列赛执裁记录</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 内容管理 -->
			<view class="menu-group" v-if="isAdminWithValidCredential">
				<view class="section-card">
					<view class="menu-title">素材中心</view>
					<view class="icon-grid">
						<view class="icon-item" @click="navigateTo('/pages/admin/my-published')">
							<view class="folder-icon-main"></view>
							<text class="icon-label">内容发布与管理</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 账户设置 -->
			<view class="menu-group">
				<view class="section-card">
					<view class="menu-title">账户设置</view>
					<view class="icon-grid">
						<view class="icon-item" @click="navigateTo('/packageMy/my/profile')">
							<view class="user-icon-main"></view>
							<text class="icon-label">个人资料</text>
						</view>
						<view class="icon-item" @click="navigateTo('/packageMy/my/settings')">
							<view class="gear-icon-main"></view>
							<text class="icon-label">系统设置</text>
						</view>
						<view class="icon-item" @click="navigateTo('/packageMy/my/feedback')">
							<view class="chat-icon-main"></view>
							<text class="icon-label">意见反馈</text>
						</view>
						<view class="icon-item" @click="navigateTo('/packageMy/my/about')">
							<view class="info-icon-main"></view>
							<text class="icon-label">关于我们</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 退出登录按钮 -->
		<view class="logout-section" v-if="isLoggedIn">
			<button class="logout-btn" @click="handleLogout">退出登录</button>
		</view>
	</view>
</template>

<script>
	import { getToken, clearToken } from '../../utils/tokenManager.js';

	export default {
		data() {
			return {
				userInfo: {},
				isLoggedIn: false,
				unreadCount: 0,
				pendingRecordsCount: 0,
				statusBarHeight: 0,
				learningStats: {
					totalCount: 0,
					completedCount: 0,
					totalDuration: 0,
					learningHours: 0
				}
			}
		},
		computed: {
			// 判断是否为认证通过的管理员（只有管理员才有内容发布权限）
			isAdminWithValidCredential() {
				// 只有 role: 4 的管理员才有内容发布权限
				const isAdmin = this.userInfo.role === 4 || this.userInfo.role === "4" || this.userInfo.role === "admin";
				
				// 检查证书状态
				const credentialStatus = String(this.userInfo.credential_status || '').toLowerCase();
				const hasValidCredential = credentialStatus === 'approved';
				
				return isAdmin && hasValidCredential;
			},
			
			// 判断是否可以发布比赛（所有登录用户都可以）
			canPublishMatch() {
				// 所有登录用户都可以发布比赛，不需要认证
				return this.isLoggedIn;
			},
			
			// 判断是否可以审核比赛申请（所有登录用户都可以审核自己发布的比赛）
			canReviewMatch() {
				// 所有登录用户都可以审核自己发布的比赛申请，不需要特殊权限
				return this.isLoggedIn;
			},
			
			// 获取用户身份标识的样式类
			userRoleClass() {
				if (!this.userInfo || !this.userInfo._id) {
					return 'role-unverified';
				}
				
				const credentialStatus = this.userInfo.credential_status;
				const role = this.userInfo.role;
				
				if (credentialStatus === 'approved') {
					if (role === 1) return 'role-referee';
					if (role === 3) return 'role-supervisor';
					if (role === 4) return 'role-admin';
				} else if (credentialStatus === 'pending') {
					return 'role-pending';
				} else if (credentialStatus === 'rejected') {
					return 'role-rejected';
				}
				
				return 'role-unverified';
			}
		},
		onShow() {
			console.log('个人中心页面显示');
			// 每次显示页面时获取最新的用户信息
			this.getUserInfoFromCloud();
			// 获取学习统计
			this.getLearningStatistics();
			// 获取未读通知数量
			this.getUnreadCount();
		},
		onLoad() {
			console.log('个人中心页面加载');
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			
			// 页面首次加载时也获取用户信息
			this.getUserInfo();
			// 获取学习统计
			this.getLearningStatistics();
			// 获取待确认记录数量
			this.getPendingRecordsCount();
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				console.log('getUserInfo 被调用');
				// 从本地存储获取用户信息
				const userInfoStr = uni.getStorageSync('userInfo');
				console.log('本地存储的用户信息字符串:', userInfoStr);
				
				if (userInfoStr) {
					try {
						const parsedUserInfo = JSON.parse(userInfoStr);
						// 确保更新状态
						this.userInfo = parsedUserInfo;
						this.isLoggedIn = true;
						console.log('已获取登录用户信息:', this.userInfo);
						console.log('isLoggedIn 设置为:', this.isLoggedIn);
					} catch (e) {
						console.error('解析用户信息失败', e);
						this.userInfo = {};
						this.isLoggedIn = false;
					}
				} else {
					// 如果本地没有用户信息，尝试从云端获取
					console.log('本地无用户信息，尝试从云端获取');
					this.getUserInfoFromCloud();
				}
			},
			
			// 从云端获取用户信息
			async getUserInfoFromCloud() {
				const token = getToken();
				if (!token) {
					console.log('无法获取用户信息：token不存在');
					return;
				}
				
				uni.showLoading({
					title: '加载中...'
				});
				
				console.log('开始调用getUserInfo云对象，token:', token);
				
				try {
					// 使用云对象调用
					const userService = uniCloud.importObject('user-service');
					const result = await userService.getUserInfo({ token: token });
					
					console.log('getUserInfo云对象返回结果:', result);
					
					if (result.code === 0 && result.data) {
						// 确保返回的数据包含必要的字段
						const userData = result.data;
						
						// 如果缺少必要的字段，做一些处理
						if (!userData.nickname && userData.username) {
							userData.nickname = userData.username;
						}
						
						// 更新本地用户信息
						this.userInfo = userData;
						this.isLoggedIn = true;
						console.log('成功获取并更新用户信息:', this.userInfo);
						
						// 更新本地存储
						uni.setStorageSync('userInfo', JSON.stringify(userData));
						console.log('用户信息已更新到本地存储');
						
						// 如果用户有认证状态但没有pending_role_type，获取最新的证书申请信息
						if ((userData.credential_status === 'pending' || userData.credential_status === 'rejected') && !userData.pending_role_type) {
							this.getPendingRoleType();
						}
					}
					uni.hideLoading();
				} catch (err) {
					console.error('获取用户信息失败:', err);
					uni.hideLoading();
					
					// 检查token是否已失效
					if (err.code === -1 && err.message && err.message.includes('token无效')) {
						console.log('token已失效，清除登录状态');
						// 由request.js拦截器自动处理token失效问题，
						// 这里就不需要做额外处理了
					} else {
						uni.showToast({
							title: '网络错误，请稍后重试',
							icon: 'none'
						});
					}
				}
			},
			
			// 获取用户待审核的角色类型
			async getPendingRoleType() {
				const token = getToken();
				if (!token) return;
				
				try {
					const credentialService = uniCloud.importObject('credential-service');
					const res = await credentialService.getCertificates(null, token);
					
					if (res.code === 0 && res.data && res.data.length > 0) {
						// 获取最新的证书申请（已按时间排序）
						const latestCredential = res.data[0];
						const roleType = latestCredential.role_type;
						
						console.log('获取到最新证书申请类型:', roleType);
						
						// 更新用户信息中的pending_role_type
						this.userInfo.pending_role_type = roleType;
						
						// 更新本地存储
						uni.setStorageSync('userInfo', JSON.stringify(this.userInfo));
						
						// 强制更新视图
						this.$forceUpdate();
					}
				} catch (err) {
					console.error('获取证书申请信息失败:', err);
				}
			},
			
			// 页面导航
			navigateTo(url) {
				// 如果未登录且不是关于我们页面，则跳转到登录页
				if (!this.isLoggedIn && url !== '/pages/my/about') {
					this.navigateToLogin();
					return;
				}
				
				uni.navigateTo({
					url: url
				});
			},


			
			// 跳转到登录页
			navigateToLogin() {
				uni.navigateTo({
					url: '/pages/login/login?from=my'
				});
			},
			
			// 处理用户信息区域点击
			handleUserInfoClick() {
				if (!this.isLoggedIn) {
					this.navigateToLogin();
				}
			},
			
			// 处理退出登录
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({ title: '正在退出...' });
							
							// 获取当前token和设备ID，用于服务端登出
							const token = getToken();
							const deviceId = uni.getStorageSync('device_id') || '';
							
							// 先调用服务端登出API，使token在服务端失效
							if (token) {
								(async () => {
									try {
										const userService = uniCloud.importObject('user-service');
										const res = await userService.logout({ token: token, device_id: deviceId });
										console.log('服务端登出成功：', res);
									} catch (err) {
										console.error('服务端登出失败:', err);
									} finally {
										// 无论服务端是否成功响应，都继续执行本地清理
										this.clearLocalLoginData();
									}
								})();
							} else {
								// 没有token的情况，直接执行本地清理
								this.clearLocalLoginData();
							}
						}
					}
				});
			},
			
			// 清理本地登录数据
			clearLocalLoginData() {
				try {
					// 调用clearToken清除token及相关数据
					clearToken(); // 使用优化后的clearToken方法
					console.log('本地凭证已清除');
					
					// 更新本地状态，以立即反映到UI
					this.userInfo = {};
					this.isLoggedIn = false;
					
					uni.hideLoading();
					
					// 提示用户
					uni.showToast({
						title: '已退出登录',
						icon: 'success'
					});
					
					// 清理完成后，强制跳转到登录页面
					// 延迟一点跳转，让Toast显示出来
					setTimeout(() => {
						uni.reLaunch({ // 使用 reLaunch 关闭所有页面，打开到登录页
							url: '/pages/login/login' // 确认这是你的登录页路径
						});
					}, 800);
					
				} catch (e) {
					uni.hideLoading();
					console.error('清除本地存储失败', e);
					uni.showToast({
						title: '退出操作失败，请稍后重试',
						icon: 'none'
					});
				}
			},
			

			
			// 获取学习统计
			async getLearningStatistics() {
				const token = getToken();
				if (!token) return;
				
				try {
					const learningService = uniCloud.importObject('learning-service');
					const res = await learningService.getLearningStatistics({
						token: token
					});
					
					if (res.code === 0) {
						console.log('获取学习统计成功:', res.data);
						this.learningStats = res.data;
						
						// 将学习时长（分钟）转换为小时
						this.learningStats.learningHours = Math.floor(this.learningStats.totalDuration / 60);
						if (this.learningStats.learningHours < 1 && this.learningStats.totalDuration > 0) {
							this.learningStats.learningHours = 1; // 不足1小时但有学习记录时，显示1小时
						}
						
						// 更新userInfo中的学习时间
						this.userInfo.study_hours = this.learningStats.learningHours;
						// 同步到本地存储
						uni.setStorageSync('userInfo', JSON.stringify(this.userInfo));
					}
				} catch (err) {
					console.error('获取学习统计失败', err);
				}
			},
			
			// 跳转到通知页面
			navigateToNotifications() {
				uni.navigateTo({
					url: '/packageNotice/Notice/notification-list'
				});
			},
			
			// 获取未读通知数量
			async getUnreadCount() {
				if (!this.isLoggedIn) return;
				
				try {
					const notificationService = uniCloud.importObject('notification-service');
					const res = await notificationService.getUnreadCount(this.userInfo._id);
					
					if (res.code === 0) {
						this.unreadCount = res.data.unreadCount;
					}
				} catch (err) {
					console.error('获取未读通知数量失败:', err);
				}
			},
			
			// 获取用户身份显示文本
			getUserRoleText() {
				// 如果用户没有登录，返回空
				if (!this.userInfo || !this.userInfo._id) {
					console.log('用户未登录或无_id，返回空字符串');
					return '';
				}
				
				const credentialStatus = this.userInfo.credential_status;
				const role = this.userInfo.role;
				
				console.log('用户认证状态(credential_status):', credentialStatus, '角色:', role);
				
				// 根据认证状态返回对应文本
				if (credentialStatus === 'pending') {
					// 如果有动态获取的申请类型，使用它
					if (this.userInfo.pending_role_type) {
						let roleText = '';
						if (this.userInfo.pending_role_type === 1) {
							roleText = '裁判员';
						} else if (this.userInfo.pending_role_type === 3) {
							roleText = '裁判监督';
						} else if (this.userInfo.pending_role_type === 4) {
							roleText = '管理员';
						} else {
							roleText = '身份';
						}
						return roleText + '认证审核中';
					}
					return '身份认证审核中';
				} else if (credentialStatus === 'rejected') {
					// 如果有动态获取的申请类型，使用它
					if (this.userInfo.pending_role_type) {
						let roleText = '';
						if (this.userInfo.pending_role_type === 1) {
							roleText = '裁判员';
						} else if (this.userInfo.pending_role_type === 3) {
							roleText = '裁判监督';
						} else if (this.userInfo.pending_role_type === 4) {
							roleText = '管理员';
						} else {
							roleText = '身份';
						}
						return roleText + '认证被拒绝';
					}
					return '身份认证被拒绝';
				} else if (credentialStatus === 'approved') {
					// 认证通过后，根据实际角色显示身份
					if (role === 1) {
						// role=1 可能是裁判员或裁判监督，需要进一步判断
						const level = this.userInfo.referee_level;
						if (level) {
							// 有等级信息说明是裁判员
							const levelMap = {
								1: '三级裁判员',
								2: '二级裁判员', 
								3: '一级裁判员',
								4: '预备国家级裁判员',
								5: '国家级裁判员',
								6: '国际级裁判员'
							};
							return levelMap[level] || '裁判员';
						} else {
							return '裁判员';
						}
					} else if (role === 3) {
						return '裁判监督';
					} else if (role === 4) {
						return '管理员';
					}
				}
				
				// 如果没有认证状态或状态为空，返回身份未认证
				console.log('默认返回：身份未认证');
				return '身份未认证';
			},
			
			// 获取认证状态显示文本
			getCredentialStatusText(status) {
				if (status === 'pending') {
					return '审核中';
				} else if (status === 'rejected') {
					return '已拒绝';
				} else if (status === 'approved') {
					return '已认证';
				} else {
					return '未认证';
				}
			},
			
			// 获取待确认记录数量
			async getPendingRecordsCount() {
				if (!this.isLoggedIn) {
					return;
				}
				
				try {
					const refereeRecordService = uniCloud.importObject('referee-record-service');
					const result = await refereeRecordService.getPendingRecords();
					
					if (result.code === 0) {
						this.pendingRecordsCount = result.data ? result.data.length : 0;
					}
				} catch (error) {
					console.error('获取待确认记录数量失败:', error);
				}
			}

		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #F8F8F8;
		padding-bottom: 40rpx;
	}
	

	
	.user-avatar-container {
		position: relative;
		margin-bottom: 20rpx;
	}
	
	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.3);
	}
	
	.user-detail {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.username {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		display: block;
	}
	
	.user-role {
		font-size: 24rpx;
		padding: 6rpx 18rpx;
		border-radius: 20rpx;
		display: inline-block;
		margin-top: 8rpx;
		font-weight: 500;
	}
	
	/* 不同身份状态的样式 */
	.user-role.role-unverified {
		background-color: rgba(255, 255, 255, 0.9);
		color: #666666;
		border: 1rpx solid rgba(255, 255, 255, 0.8);
	}
	
	.user-role.role-pending {
		background-color: #FFC107;
		color: #FFFFFF;
		box-shadow: 0 2rpx 8rpx rgba(255, 193, 7, 0.3);
	}
	
	.user-role.role-rejected {
		background-color: #DC3545;
		color: #FFFFFF;
		box-shadow: 0 2rpx 8rpx rgba(220, 53, 69, 0.3);
	}
	
	.user-role.role-referee {
		background-color: #007BFF;
		color: #FFFFFF;
		box-shadow: 0 2rpx 8rpx rgba(0, 123, 255, 0.3);
	}
	
	.user-role.role-admin {
		background-color: #6F42C1;
		color: #FFFFFF;
		box-shadow: 0 2rpx 8rpx rgba(111, 66, 193, 0.3);
	}
	
	.user-role.role-supervisor {
		background-color: #FD7E14;
		color: #FFFFFF;
		box-shadow: 0 2rpx 8rpx rgba(253, 126, 20, 0.3);
	}
	
	/* 添加登录提示样式 */
	.login-tip {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	
	.login-tip .arrow {
		margin-left: 10rpx;
		font-weight: bold;
	}
	
	.user-stats {
		display: flex;
		justify-content: space-around;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 10rpx;
		padding: 20rpx 0;
	}
	
	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.stat-value {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 6rpx;
	}
	
	.stat-label {
		font-size: 24rpx;
		opacity: 0.8;
	}
	
	/* 菜单区域样式 */
	.menu-section {
		padding: 20rpx 30rpx;
	}
	
	.menu-group {
		margin-bottom: 30rpx;
	}
	
	.menu-title {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 20rpx;
		padding: 0 0 10rpx 0;
		font-weight: 600;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}
	
	/* 版块卡片布局 */
	.section-card {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 25rpx 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
		
		/* 毛玻璃效果 */
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
		background: linear-gradient(135deg, 
			rgba(255, 255, 255, 0.95) 0%, 
			rgba(255, 255, 255, 0.85) 100%);
		border: 1px solid rgba(255, 255, 255, 0.3);
		box-shadow: 
			0 8rpx 32rpx rgba(0, 0, 0, 0.08),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.5);
	}
	
	/* 图标网格布局 */
	.icon-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx 0;
	}
	
	.icon-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		padding: 4rpx 0;
		border-radius: 8rpx;
	}
	
	.icon-item:active {
		transform: scale(0.95);
		background-color: rgba(0, 0, 0, 0.05);
	}
	

	
	.icon-label {
		font-size: 20rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		line-height: 1.2;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.icon-badge {
		position: absolute;
		top: -5rpx;
		right: -5rpx;
		font-size: 18rpx;
		padding: 2rpx 6rpx;
		border-radius: 8rpx;
		font-weight: 500;
		min-width: 20rpx;
		height: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.badge-pending {
		background-color: #FFC107;
		color: #FFFFFF;
	}
	
	.badge-approved {
		background-color: #28a745;
		color: #FFFFFF;
	}
	
	.badge-rejected {
		background-color: #DC3545;
		color: #FFFFFF;
	}
	
	.badge-unverified {
		background-color: #6C757D;
		color: #FFFFFF;
	}
	
	/* 图标样式定义 */
	/* 学习记录图标 */
	.study-glass-icon {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.book-icon-main {
		width: 38rpx;
		height: 32rpx;
		background: linear-gradient(135deg, #1eca7d, #43CF7C);
		border-radius: 5rpx;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(30, 202, 125, 0.3);
		margin-bottom: 12rpx;
	}
	
	.book-icon-main::before {
		content: '';
		position: absolute;
		top: 6rpx;
		left: 6rpx;
		right: 6rpx;
		height: 1.5rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 1rpx;
	}
	
	.book-icon-main::after {
		content: '';
		position: absolute;
		top: 12rpx;
		left: 6rpx;
		right: 6rpx;
		height: 1.5rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 1rpx;
	}
	

	
	/* 我的收藏图标 */
	.favorite-glass-icon {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.star-icon-main {
		width: 34rpx;
		height: 34rpx;
		background: linear-gradient(135deg, #ffd700, #ff8f00);
		border-radius: 50%;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(255, 215, 0, 0.3);
		margin-bottom: 12rpx;
	}
	
	.star-icon-main::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 20rpx;
		height: 20rpx;
		background: rgba(255, 255, 255, 0.9);
		clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	}
	

	
	/* 学习计划图标 */
	.plan-glass-icon {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.calendar-icon-main {
		width: 34rpx;
		height: 34rpx;
		background: linear-gradient(135deg, #9c77f8, #7b68ee);
		border-radius: 5rpx;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(156, 119, 248, 0.3);
		margin-bottom: 12rpx;
	}
	
	.calendar-icon-main::before {
		content: '';
		position: absolute;
		top: 8rpx;
		left: 8rpx;
		right: 8rpx;
		height: 5rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 2rpx;
	}
	
	.calendar-icon-main::after {
		content: '';
		position: absolute;
		top: 20rpx;
		left: 10rpx;
		width: 6rpx;
		height: 6rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 50%;
	}
	

	
	/* 认证申请图标 */
	.credential-glass-icon {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.certificate-icon-main {
		width: 38rpx;
		height: 32rpx;
		background: linear-gradient(135deg, #3498db, #2980b9);
		border-radius: 5rpx;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(52, 152, 219, 0.3);
		margin-bottom: 12rpx;
	}
	
	.certificate-icon-main::before {
		content: '';
		position: absolute;
		top: 5rpx;
		left: 5rpx;
		right: 5rpx;
		height: 1rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 1rpx;
	}
	
	.certificate-icon-main::after {
		content: '';
		position: absolute;
		top: 10rpx;
		left: 5rpx;
		right: 5rpx;
		height: 1rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 1rpx;
	}
	

	
	/* 我的证书图标 */
	
	.award-icon-main {
		width: 32rpx;
		height: 38rpx;
		background: linear-gradient(135deg, #f39c12, #e67e22);
		border-radius: 5rpx 5rpx 12rpx 12rpx;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(243, 156, 18, 0.3);
		margin-bottom: 12rpx;
	}
	
	.award-icon-main::before {
		content: '';
		position: absolute;
		top: 5rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 12rpx;
		height: 12rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 50%;
	}
	
	.award-icon-main::after {
		content: '';
		position: absolute;
		bottom: 5rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 18rpx;
		height: 3rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 2rpx;
	}
	

	
	/* 我的报名图标 */
	.form-icon-main {
		width: 34rpx;
		height: 34rpx;
		background: linear-gradient(135deg, #2ecc71, #27ae60);
		border-radius: 5rpx;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(46, 204, 113, 0.3);
		margin-bottom: 12rpx;
	}
	
	.form-icon-main::before {
		content: '';
		position: absolute;
		top: 5rpx;
		left: 5rpx;
		right: 5rpx;
		height: 1rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 1rpx;
	}
	
	.form-icon-main::after {
		content: '';
		position: absolute;
		top: 10rpx;
		left: 5rpx;
		right: 5rpx;
		height: 1rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 1rpx;
	}
	
	/* 执裁记录图标 */
	
	.chart-icon-main {
		width: 34rpx;
		height: 34rpx;
		background: linear-gradient(135deg, #ff6b6b, #ee5a24);
		border-radius: 5rpx;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(255, 107, 107, 0.3);
		margin-bottom: 12rpx;
	}
	
	.chart-icon-main::before {
		content: '';
		position: absolute;
		bottom: 5rpx;
		left: 5rpx;
		width: 4rpx;
		height: 10rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 2rpx;
	}
	
	.chart-icon-main::after {
		content: '';
		position: absolute;
		bottom: 5rpx;
		left: 12rpx;
		width: 4rpx;
		height: 15rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 2rpx;
	}
	

	
	/* 执裁评价图标 */
	
	.clock-icon-main {
		width: 34rpx;
		height: 34rpx;
		background: linear-gradient(135deg, #ff9f43, #feca57);
		border-radius: 50%;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(255, 159, 67, 0.3);
		margin-bottom: 12rpx;
	}
	
	.clock-icon-main::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 1rpx;
		height: 8rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 1rpx;
	}
	
	.clock-icon-main::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 1rpx;
		height: 5rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 1rpx;
		transform-origin: bottom;
		transform: translate(-50%, -50%) rotate(90deg);
	}
	
	/* 比赛发布图标 */
	
	.megaphone-icon-main {
		width: 38rpx;
		height: 32rpx;
		background: linear-gradient(135deg, #ff9950, #ff7043);
		border-radius: 5rpx;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(255, 153, 80, 0.3);
		margin-bottom: 12rpx;
	}
	
	.megaphone-icon-main::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 5rpx;
		transform: translateY(-50%);
		width: 14rpx;
		height: 5rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 2rpx;
	}
	
	.megaphone-icon-main::after {
		content: '';
		position: absolute;
		top: 50%;
		right: 5rpx;
		transform: translateY(-50%);
		width: 5rpx;
		height: 5rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 50%;
	}
	
	/* 选派审核图标 */
	
	.shield-icon-main {
		width: 32rpx;
		height: 38rpx;
		background: linear-gradient(135deg, #007AFF, #0051D0);
		border-radius: 5rpx 5rpx 16rpx 16rpx;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(0, 122, 255, 0.3);
		margin-bottom: 12rpx;
	}
	
	.shield-icon-main::before {
		content: '';
		position: absolute;
		top: 6rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 8rpx;
		height: 8rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 50%;
	}
	
	.shield-icon-main::after {
		content: '';
		position: absolute;
		top: 18rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 4rpx;
		height: 1.5rpx;
		border-left: 1rpx solid rgba(255, 255, 255, 0.6);
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.6);
		transform: translateX(-50%) rotate(-45deg);
	}
	
	/* 系列赛执裁记录图标 */
	
	.tournament-icon-main {
		width: 34rpx;
		height: 34rpx;
		background: linear-gradient(135deg, #9b59b6, #8e44ad);
		border-radius: 5rpx;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(155, 89, 182, 0.3);
		margin-bottom: 12rpx;
	}
	
	.tournament-icon-main::before {
		content: '';
		position: absolute;
		top: 5rpx;
		left: 5rpx;
		width: 8rpx;
		height: 8rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 50%;
	}
	
	.tournament-icon-main::after {
		content: '';
		position: absolute;
		top: 5rpx;
		right: 5rpx;
		width: 8rpx;
		height: 8rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 50%;
	}
	
	/* 内容发布与管理图标 */
	
	.folder-icon-main {
		width: 38rpx;
		height: 32rpx;
		background: linear-gradient(135deg, #f39c12, #e67e22);
		border-radius: 5rpx;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(243, 156, 18, 0.3);
		margin-bottom: 12rpx;
	}
	
	.folder-icon-main::before {
		content: '';
		position: absolute;
		top: 5rpx;
		left: 5rpx;
		width: 14rpx;
		height: 1.5rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 2rpx;
	}
	
	.folder-icon-main::after {
		content: '';
		position: absolute;
		top: 10rpx;
		left: 5rpx;
		right: 5rpx;
		height: 13rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 2rpx;
	}
	

	
	/* 个人资料图标 */
	
	.user-icon-main {
		width: 34rpx;
		height: 34rpx;
		background: linear-gradient(135deg, #3498db, #2980b9);
		border-radius: 50%;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(52, 152, 219, 0.3);
		margin-bottom: 12rpx;
	}
	
	.user-icon-main::before {
		content: '';
		position: absolute;
		top: 6rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 8rpx;
		height: 8rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 50%;
	}
	
	.user-icon-main::after {
		content: '';
		position: absolute;
		bottom: 5rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 20rpx;
		height: 12rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 10rpx 10rpx 0 0;
	}
	

	
	/* 系统设置图标 */
	
	.gear-icon-main {
		width: 34rpx;
		height: 34rpx;
		background: linear-gradient(135deg, #95a5a6, #7f8c8d);
		border-radius: 5rpx;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(149, 165, 166, 0.3);
		margin-bottom: 12rpx;
	}
	
	.gear-icon-main::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 10rpx;
		height: 10rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 50%;
	}
	
	.gear-icon-main::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 4rpx;
		height: 4rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 50%;
	}
	

	
	/* 意见反馈图标 */
	
	.chat-icon-main {
		width: 34rpx;
		height: 32rpx;
		background: linear-gradient(135deg, #ff6b6b, #ee5a24);
		border-radius: 5rpx;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(255, 107, 107, 0.3);
		margin-bottom: 12rpx;
	}
	
	.chat-icon-main::before {
		content: '';
		position: absolute;
		top: 5rpx;
		left: 5rpx;
		right: 5rpx;
		height: 1rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 1rpx;
	}
	
	.chat-icon-main::after {
		content: '';
		position: absolute;
		top: 10rpx;
		left: 5rpx;
		right: 5rpx;
		height: 1rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 1rpx;
	}
	
	.message-icon-small {
		width: 14rpx;
		height: 14rpx;
		background: linear-gradient(135deg, #2ecc71, #27ae60);
		border-radius: 50%;
		position: absolute;
		bottom: -3rpx;
		right: -3rpx;
		box-shadow: 0 2rpx 6rpx rgba(46, 204, 113, 0.4);
	}
	
	/* 关于我们图标 */
	
	.info-icon-main {
		width: 34rpx;
		height: 34rpx;
		background: linear-gradient(135deg, #74b9ff, #0984e3);
		border-radius: 50%;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(116, 185, 255, 0.3);
		margin-bottom: 12rpx;
	}
	
	.info-icon-main::before {
		content: '';
		position: absolute;
		top: 8rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 2.5rpx;
		height: 2.5rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 50%;
	}
	
	.info-icon-main::after {
		content: '';
		position: absolute;
		top: 14rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 1rpx;
		height: 10rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 1rpx;
	}
	
	.help-icon-small {
		width: 14rpx;
		height: 14rpx;
		background: linear-gradient(135deg, #fdcb6e, #e17055);
		border-radius: 50%;
		position: absolute;
		bottom: -3rpx;
		right: -3rpx;
		box-shadow: 0 2rpx 6rpx rgba(253, 203, 110, 0.4);
	}
	
	/* 退出登录按钮样式 */
	.logout-section {
		padding: 20rpx 30rpx;
		margin-top: 20rpx;
	}
	
	.logout-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #FFFFFF;
		color: #FF5151;
		border-radius: 10rpx;
		font-size: 28rpx;
		margin-top: 20rpx;
	}
	

	
	/* 认证信息标识样式 */
	.certification-badge {
		position: absolute;
		right: -5rpx;
		bottom: -5rpx;
		width: 32rpx;
		height: 32rpx;
		background-color: #FFFFFF;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.certification-icon {
		width: 20rpx;
		height: 20rpx;
	}
	
	.certification-text {
		font-size: 24rpx;
		color: #FFFFFF;
	}
	
	/* 用户信息区域样式调整 */
	.user-info-section {
		position: relative;
		/* 应用首页的渐变背景样式 */
		background: linear-gradient(135deg, #8dd3c7 0%, #b8e6b8 30%, #d0d0d0 70%, #f5f5f5 100%);
		padding: 0 30rpx 40rpx;
		color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	/* 自定义导航栏样式 */
	.custom-navbar {
		width: 100%;
		position: relative;
		z-index: 999;
	}
	
	.status-bar {
		width: 100%;
	}
	
	.navbar-content {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		padding: 0 30rpx;
	}
	
	.navbar-title {
		font-size: 32rpx;
		font-weight: bold;
		color: white;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	
	/* 通知图标样式 */
	.notification-icon {
		position: relative;
		z-index: 10;
	}
	
	.notify-icon-text {
		font-size: 50rpx;
		line-height: 50rpx;
		padding: 10rpx;
	}
	
	.unread-badge {
		position: absolute;
		top: 0;
		right: 0;
		min-width: 50rpx;
		height: 50rpx;
		background-color: #FF4757;
		color: #FFFFFF;
		border-radius: 16rpx;
		font-size: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 8rpx;
		box-sizing: border-box;
		border: 2rpx solid #FFFFFF;
	}
	
	/* 用户信息居中 */
	.user-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		width: 100%;
		margin-top: 20rpx;
	}
</style> 